<template>
  <div class="Found">
    <!-- 顶部标题 -->
    <top-title-bar>
      <template #left>
        <div class="left">
          <span class="title">发现</span>
        </div>
      </template>
      <template #middle>
        <div class="middle"></div>
      </template>
      <template #right>
        <div class="right">
          <span
            class="iconfont icon-xiaoxi"
            @click="$router.push('/MsgView')"
          ></span>
        </div>
      </template>
    </top-title-bar>
    <div class="wrap">
      <div class="box">
        <div class="item">
          <div class="img">
            <img src="../assets/img/FoundView/found-1.png" alt="" />
          </div>
          <div class="title">
            <h4>玩游戏赚葫芦</h4>
          </div>
          <i></i>
        </div>

        <div class="item">
          <div class="img">
            <img src="../assets/img/FoundView/found-2.png" alt="" />
          </div>
          <div class="title">
            <h4>个性装扮</h4>
          </div>
          <i></i>
        </div>

        <router-link tag="div" to="/ProductView" class="item">
          <div class="img">
            <img src="../assets/img/FoundView/found-3.png" alt="" />
          </div>
          <div class="title">
            <h4>礼物兑换中心</h4>
          </div>
          <i></i>
        </router-link>

        <div class="item">
          <div class="img">
            <img src="../assets/img/FoundView/found-4.png" alt="" />
          </div>
          <div class="title">
            <h4>活动</h4>
          </div>
          <i></i>
        </div>

        <div class="item">
          <div class="img">
            <img src="../assets/img/FoundView/found-5.png" alt="" />
          </div>
          <div class="title">
            <h4>闪传</h4>
          </div>
          <i></i>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import TopTitleBar from "../components/TopTitleBar.vue";
export default {
  components: {
    TopTitleBar,
  },
};
</script>



<style lang="scss" scoped>
.Found {
  min-height: 100%;
  background-color: #fff;
  .TopTitleBar {
    .right {
      .icon-xiaoxi {
        font-weight: bold;
        color: #fff;
        font-size: 22px;
      }
    }
  }

  .wrap {
    padding-top: 0;

    .box {
      padding: 0 12px;

      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 74px;
        box-sizing: border-box;
        border-bottom: 1px solid #eaeaea;
        position: relative;
      }

      .img {
        width: 49px;
        height: 49px;
      }

      .title {
        width: calc(100% - 59px);
        box-sizing: border-box;
        padding-right: 25px;
        height: 49px;
        line-height: 49px;
        color: #3e3e3e;

        h4 {
          font-weight: normal;
        }
      }

      i {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 9px;
        height: 17px;
        background-size: cover;
      }
    }

    .box {
      .item {
        &:active {
          box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.2) inset;
          opacity: 0.9;
        }
      }
    }
  }
}
</style>